<!-- Background color start -->
<section id="backColor">
    <div class="row">
        <div class="col-md-12 mt-3 mb-1">
            <h4 class="text-uppercase">Success Background Color</h4>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="card p-1 text-white bg-success">
                <div class="card-content">
                    <div class="card-body">
                    <div class="float-left">
                        <p class="white mb-0"><strong>Success Color</strong></p>
                        <p class="card-title">.bg-success</p>
                    </div>
                    <div class="float-right">
                        <p class="card-title"><small class="float-right">#28D094</small></p>
                    </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4">
            <div class="card mb-1">
                <div class="card-content">
                    <div class="bg-success bg-lighten-1 height-50"></div>
                    <div class="p-1">
                        <p class="mb-0"><strong>Success Lighten 1</strong><small class="text-muted float-right">#48D7A4</small></p>
                        <p class="mb-0">.bg-success.bg-lighten-1</p>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="bg-success bg-lighten-2 height-50"></div>
                    <div class="p-1">
                        <p class="mb-0"><strong>Success Lighten 2</strong><small class="text-muted float-right">#69DEB4</small></p>
                        <p class="mb-0">.bg-success.bg-lighten-2</p>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="bg-success bg-lighten-3 height-50"></div>
                    <div class="p-1">
                        <p class="mb-0"><strong>Success Lighten 3</strong><small class="text-muted float-right">#94E8CA</small></p>
                        <p class="mb-0">.bg-success.bg-lighten-3</p>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="bg-success bg-lighten-4 height-50"></div>
                    <div class="p-1">
                        <p class="mb-0"><strong>Success Lighten 4</strong><small class="text-muted float-right">#BFF1DF</small></p>
                        <p class="mb-0">.bg-success.bg-lighten-4</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card mb-1">
                <div class="card-content">
                    <div class="bg-success bg-darken-1 height-50"></div>
                    <div class="p-1">
                        <p class="mb-0"><strong>Success Darken 1</strong><small class="text-muted float-right">#24CB8C</small></p>
                        <p class="mb-0">.bg-success.bg-darken-1</p>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="bg-success bg-darken-2 height-50"></div>
                    <div class="p-1">
                        <p class="mb-0"><strong>Success Darken 2</strong><small class="text-muted float-right">#1EC481</small></p>
                        <p class="mb-0">.bg-success.bg-darken-2</p>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="bg-success bg-darken-3 height-50"></div>
                    <div class="p-1">
                        <p class="mb-0"><strong>Success Darken 3</strong><small class="text-muted float-right">#18BE77</small></p>
                        <p class="mb-0">.bg-success.bg-darken-3</p>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="bg-success bg-darken-4 height-50"></div>
                    <div class="p-1">
                        <p class="mb-0"><strong>Success Darken 4</strong><small class="text-muted float-right">#0FB365</small></p>
                        <p class="mb-0">.bg-success.bg-darken-4</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card mb-1">
                <div class="card-content">
                    <div class="bg-success bg-accent-1 height-50"></div>
                    <div class="p-1">
                        <p class="mb-0"><strong>Success Accent 1</strong><small class="text-muted float-right">#E1FFF0</small></p>
                        <p class="mb-0">.bg-success.bg-accent-1</p>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="bg-success bg-accent-2 height-50"></div>
                    <div class="p-1">
                        <p class="mb-0"><strong>Success Accent 2</strong><small class="text-muted float-right">#AEFFD5</small></p>
                        <p class="mb-0">.bg-success.bg-accent-2</p>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="bg-success bg-accent-3 height-50"></div>
                    <div class="p-1">
                        <p class="mb-0"><strong>Success Accent 3</strong><small class="text-muted float-right">#7BFFBB</small></p>
                        <p class="mb-0">.bg-success.bg-accent-3</p>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="bg-success bg-accent-4 height-50"></div>
                    <div class="p-1">
                        <p class="mb-0"><strong>Success Accent 4</strong><small class="text-muted float-right">#62FFAE</small></p>
                        <p class="mb-0">.bg-success.bg-accent-4</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <a class="heading-elements-toggle"><i class="la la-ellipsis-v font-medium-3"></i></a>
                    <div class="heading-elements">
                        <ul class="list-inline mb-0">
                            <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                            <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                            <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                            <li><a data-action="close"><i class="ft-x"></i></a></li>
                        </ul>
                    </div>
                    <h4 class="card-title">Success Palette Classes</h4>
                </div>
                <div class="card-content">
                    <div class="card-body">
                        <p>Success color palette contains 13 colors: 1 main success color and 4 lighten colors, 4 darken colors and  4 Accent colors. All colors works perfectly with any bootstrap components, form components or any modern controls, that makes Modern very effective, flexible and configurable.</p>
                        <p class="mt-1"><strong>Please note:</strong> Default Bootstrap classes - primary, success, danger, info, warning - are available, so you can use .bg-success and .btn-success as main colors, but if you want to use lighten, darken or accent colors, use bg-* bg-lighten-NUMBER for lighten color, bg-* bg-darken-NUMBER for darken color  and bg-* bg-accent-NUMBER for accent colors.</p>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="table-responsive">
                                <table class="table table-bordered">
                                    <thead>
                                        <tr>
                                            <th style="width: 30%;">Class</th>
                                            <th>Description</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><code>.bg-success</code></td>
                                            <td>Success Class for background color.</td>
                                        </tr>
                                        <tr>
                                            <td><code>.bg-success</code><br><code>.bg-lighten-*</code></td>
                                            <td>For <code>lighten</code> success background color, this two classes needed. Here *: 1,2,3,4 lighten success color options.</td>
                                        </tr>
                                        <tr>
                                            <td><code>.bg-success</code><br><code>.bg-darken-*</code></td>
                                            <td>For <code>darken</code> success background color, this two classes needed. Here *: 1,2,3,4 darken success color options.</td>
                                        </tr>
                                        <tr>
                                            <td><code>.bg-success</code><br><code>.bg-accent-*</code></td>
                                            <td>For <code>accent</code> success background color, this two classes needed. Here *: 1,2,3,4 accent success color options.</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Background color end -->

<!-- Border color start -->
<section id="borderColor">
    <div class="row">
        <div class="col-md-12 mt-3 mb-1">
            <h4 class="text-uppercase">Success Border Color</h4>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="card p-1 border-success">
                <div class="card-content">
                    <div class="card-body">
                    <div class="float-left">
                        <p class="mb-0"><strong>Success Color</strong></p>
                        <p class="card-title">.border-success</p>
                    </div>
                    <div class="float-right">
                        <p class="card-title"><small class="float-right">#28D094</small></p>
                    </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4">
            <div class="card mb-1 border-success border-lighten-1">
                <div class="card-content">
                    <div class="p-1">
                        <p class="mb-0"><strong>Success Lighten 1</strong><small class="text-muted float-right">#48D7A4</small></p>
                        <p class="mb-0">.border-success.border-lighten-1</p>
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-success border-lighten-2">
                <div class="card-content">
                    <div class="p-1">
                        <p class="mb-0"><strong>Success Lighten 2</strong><small class="text-muted float-right">#69DEB4</small></p>
                        <p class="mb-0">.border-success.border-lighten-2</p>
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-success border-lighten-3">
                <div class="card-content">
                    <div class="p-1">
                        <p class="mb-0"><strong>Success Lighten 3</strong><small class="text-muted float-right">#94E8CA</small></p>
                        <p class="mb-0">.border-success.border-lighten-3</p>
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-success border-lighten-4">
                <div class="card-content">
                    <div class="p-1">
                        <p class="mb-0"><strong>Success Lighten 4</strong><small class="text-muted float-right">#BFF1DF</small></p>
                        <p class="mb-0">.border-success.border-lighten-4</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card mb-1 border-success border-darken-1">
                <div class="card-content">
                    <div class="p-1">
                        <p class="mb-0"><strong>Success Darken 1</strong><small class="text-muted float-right">#24CB8C</small></p>
                        <p class="mb-0">.border-success.border-darken-1</p>
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-success border-darken-2">
                <div class="card-content">
                    <div class="p-1">
                        <p class="mb-0"><strong>Success Darken 2</strong><small class="text-muted float-right">#1EC481</small></p>
                        <p class="mb-0">.border-success.border-darken-2</p>
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-success border-darken-3">
                <div class="card-content">
                    <div class="p-1">
                        <p class="mb-0"><strong>Success Darken 3</strong><small class="text-muted float-right">#18BE77</small></p>
                        <p class="mb-0">.border-success.border-darken-3</p>
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-success border-darken-4">
                <div class="card-content">
                    <div class="p-1">
                        <p class="mb-0"><strong>Success Darken 4</strong><small class="text-muted float-right">#0FB365</small></p>
                        <p class="mb-0">.border-success.border-darken-4</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card mb-1 border-success border-accent-1">
                <div class="card-content">
                    <div class="p-1">
                        <p class="mb-0"><strong>Success Accent 1</strong><small class="text-muted float-right">#E1FFF0</small></p>
                        <p class="mb-0">.border-success.border-accent-1</p>
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-success border-accent-2">
                <div class="card-content">
                    <div class="p-1">
                        <p class="mb-0"><strong>Success Accent 2</strong><small class="text-muted float-right">#AEFFD5</small></p>
                        <p class="mb-0">.border-success.border-accent-2</p>
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-success border-accent-3">
                <div class="card-content">
                    <div class="p-1">
                        <p class="mb-0"><strong>Success Accent 3</strong><small class="text-muted float-right">#7BFFBB</small></p>
                        <p class="mb-0">.border-success.border-accent-3</p>
                    </div>
                </div>
            </div>
            <div class="card mb-1 border-success border-accent-4">
                <div class="card-content">
                    <div class="p-1">
                        <p class="mb-0"><strong>Success Accent 4</strong><small class="text-muted float-right">#62FFAE</small></p>
                        <p class="mb-0">.border-success.border-accent-4</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Success Border Classes</h4>
                    <a class="heading-elements-toggle"><i class="la la-ellipsis-v font-medium-3"></i></a>
                    <div class="heading-elements">
                        <ul class="list-inline mb-0">
                            <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                            <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                            <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                            <li><a data-action="close"><i class="ft-x"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="card-content collapse show">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="table-responsive">
                                <table class="table table-bordered">
                                    <thead>
                                        <tr>
                                            <th style="width: 30%;">Class</th>
                                            <th>Description</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><code>.border-success</code></td>
                                            <td>Success Class for background color.</td>
                                        </tr>
                                        <tr>
                                            <td><code>.border-success</code><br><code>.border-lighten-*</code></td>
                                            <td>For lighten success background color, this two classes needed. Here *: 1,2,3,4 lighten success color options.</td>
                                        </tr>
                                        <tr>
                                            <td><code>.border-top-success</code><br><code>.border-top-lighten-*</code></td>
                                            <td>For lighten success <code>top</code> border. Use this classes if you need to highlight only top border.</td>
                                        </tr>
                                        <tr>
                                            <td><code>.border-bottom-success</code><br><code>.border-bottom-lighten-*</code></td>
                                            <td>For lighten success <code>bottom</code> border. Use this classes if you need to highlight only bottom border.</td>
                                        </tr>
                                        <tr>
                                            <td><code>.border-right-success</code><br><code>.border-right-lighten-*</code></td>
                                            <td>For lighten success <code>right</code> border. Use this classes if you need to highlight only right border.</td>
                                        </tr>
                                        <tr>
                                            <td><code>.border-left-success</code><br><code>.border-left-lighten-*</code></td>
                                            <td>For lighten success <code>left</code> border. Use this classes if you need to highlight only left border.</td>
                                        </tr>
                                        <tr>
                                            <td><code>.border-success</code><br><code>.border-darken-*</code></td>
                                            <td>For darken success background color, this two classes needed. Here *: 1,2,3,4 darken success color options.</td>
                                        </tr>
                                        <tr>
                                            <td><code>.border-top-success</code><br><code>.border-top-darken-*</code></td>
                                            <td>For darken success <code>top</code> border. Use this classes if you need to highlight only top border.</td>
                                        </tr>
                                        <tr>
                                            <td><code>.border-bottom-success</code><br><code>.border-bottom-darken-*</code></td>
                                            <td>For darken success <code>bottom</code> border. Use this classes if you need to highlight only bottom border.</td>
                                        </tr>
                                        <tr>
                                            <td><code>.border-right-success</code><br><code>.border-right-darken-*</code></td>
                                            <td>For darken success <code>right</code> border. Use this classes if you need to highlight only right border.</td>
                                        </tr>
                                        <tr>
                                            <td><code>.border-left-success</code><br><code>.border-left-darken-*</code></td>
                                            <td>For darken success <code>left</code> border. Use this classes if you need to highlight only left border.</td>
                                        </tr>
                                        <tr>
                                            <td><code>.border-success</code><br><code>.border-accent-*</code></td>
                                            <td>For accent success background color, this two classes needed. Here *: 1,2,3,4 accent success color options.</td>
                                        </tr>
                                        <tr>
                                            <td><code>.border-top-success</code><br><code>.border-top-accent-*</code></td>
                                            <td>For accent success <code>top</code> border. Use this classes if you need to highlight only top border.</td>
                                        </tr>
                                        <tr>
                                            <td><code>.border-bottom-success</code><br><code>.border-bottom-accent-*</code></td>
                                            <td>For accent success <code>bottom</code> border. Use this classes if you need to highlight only bottom border.</td>
                                        </tr>
                                        <tr>
                                            <td><code>.border-right-success</code><br><code>.border-right-accent-*</code></td>
                                            <td>For accent success <code>right</code> border. Use this classes if you need to highlight only right border.</td>
                                        </tr>
                                        <tr>
                                            <td><code>.border-left-success</code><br><code>.border-left-accent-*</code></td>
                                            <td>For accent success <code>left</code> border. Use this classes if you need to highlight only left border.</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Border color end -->

<!-- Text color start -->
<section id="textColor">
    <div class="row">
        <div class="col-md-12 mt-3 mb-1">
            <h4 class="text-uppercase">Success Text Color</h4>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="card p-1">
                <div class="card-content">
                    <div class="card-body">
                    <div class="float-left">
                        <p class="mb-0"><strong>Success Color</strong></p>
                        <p class="card-title">.success</p>
                    </div>
                    <div class="float-right">
                        <p class="card-title mb-0 success"><small class="float-right">#28D094</small></p>
                    </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4">
            <div class="card mb-1">
                <div class="card-content">
                    <div class="p-1">
                        <p class="mb-0"><strong>Success Lighten 1</strong><small class="text-muted float-right success">#48D7A4</small></p>
                        <p class="mb-0">.success.lighten-1</p>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="p-1">
                        <p class="mb-0"><strong>Success Lighten 2</strong><small class="text-muted float-right success lighten-2">#69DEB4</small></p>
                        <p class="mb-0">.success.lighten-2</p>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="p-1">
                        <p class="mb-0"><strong>Success Lighten 3</strong><small class="text-muted float-right success lighten-3">#94E8CA</small></p>
                        <p class="mb-0">.success.lighten-3</p>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="p-1">
                        <p class="mb-0"><strong>Success Lighten 4</strong><small class="text-muted float-right success lighten-4">#BFF1DF</small></p>
                        <p class="mb-0">.success.lighten-4</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card mb-1">
                <div class="card-content">
                    <div class="p-1">
                        <p class="mb-0"><strong>Success Darken 1</strong><small class="text-muted float-right success darken-1">#24CB8C</small></p>
                        <p class="mb-0">.success.darken-1</p>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="p-1">
                        <p class="mb-0"><strong>Success Darken 2</strong><small class="text-muted float-right success darken-2">#1EC481</small></p>
                        <p class="mb-0">.success.darken-2</p>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="p-1">
                        <p class="mb-0"><strong>Success Darken 3</strong><small class="text-muted float-right success darken-3">#18BE77</small></p>
                        <p class="mb-0">.success.darken-3</p>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="p-1">
                        <p class="mb-0"><strong>Success Darken 4</strong><small class="text-muted float-right success darken-4">#0FB365</small></p>
                        <p class="mb-0">.success.darken-4</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card mb-1">
                <div class="card-content">
                    <div class="p-1">
                        <p class="mb-0"><strong>Success Accent 1</strong><small class="text-muted float-right success accent-1">#E1FFF0</small></p>
                        <p class="mb-0">.success.accent-1</p>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="p-1">
                        <p class="mb-0"><strong>Success Accent 2</strong><small class="text-muted float-right success accent-2">#AEFFD5</small></p>
                        <p class="mb-0">.success.accent-2</p>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="p-1">
                        <p class="mb-0"><strong>Success Accent 3</strong><small class="text-muted float-right success accent-3">#7BFFBB</small></p>
                        <p class="mb-0">.success.accent-3</p>
                    </div>
                </div>
            </div>
            <div class="card mb-1">
                <div class="card-content">
                    <div class="p-1">
                        <p class="mb-0"><strong>Success Accent 4</strong><small class="text-muted float-right success accent-4">#62FFAE</small></p>
                        <p class="mb-0">.success.accent-4</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Success Text Classes</h4>
                    <a class="heading-elements-toggle"><i class="la la-ellipsis-v font-medium-3"></i></a>
                    <div class="heading-elements">
                        <ul class="list-inline mb-0">
                            <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                            <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                            <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                            <li><a data-action="close"><i class="ft-x"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="card-content collapse show">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="table-responsive">
                                <table class="table table-bordered">
                                    <thead>
                                        <tr>
                                            <th style="width: 30%;">Class</th>
                                            <th>Description</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><code>.success</code></td>
                                            <td>Class for Success Text color.</td>
                                        </tr>
                                        <tr>
                                            <td><code>.success</code><br><code>.lighten-*</code></td>
                                            <td>For <code>lighten</code> success text color, this two classes needed. Here *: 1,2,3,4 for lighten success color options.</td>
                                        </tr>
                                        <tr>
                                            <td><code>.success</code><br><code>.darken-*</code></td>
                                            <td>For <code>darken</code> success text color, this two classes needed. Here *: 1,2,3,4 for darken success color options.</td>
                                        </tr>
                                        <tr>
                                            <td><code>.success</code><br><code>.accent-*</code></td>
                                            <td>For <code>accent</code> success text color, this two classes needed. Here *: 1,2,3,4 for accent success color options.</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Text color end -->